<template>
  <el-drawer
    :close-on-press-escape="false"
    v-model="visible"
    size="100%"
    title="详细信息"
    :with-header="false"
    @close="handleClose"
  >
    <div class="station-drawer">
      <div class="map-box">
        <StationMap ref="stationMapRef" @location="handleLocation" />
      </div>
      <div class="form-box">
        <div class="form-header">
          <h4>详细信息</h4>
          <div class="buttons" v-if="pageType == 'edit' || pageType == 'add'">
            <el-button plain @click="handleEdit(null)">取消</el-button>
            <el-button type="primary" @click="onSubmit">保存</el-button>
          </div>
          <div class="buttons" v-else-if="pageType == 'view'">
            <el-tooltip content="编辑" placement="top">
              <el-button
                v-if="auditType == 0"
                type="primary"
                icon="Edit"
                circle
                @click="handleEdit('edit')"
              />
            </el-tooltip>
            <el-tooltip content="删除" placement="top">
              <el-button
                v-if="auditType == 0"
                type="danger"
                icon="Delete"
                circle
                @click="handleDelete"
              />
            </el-tooltip>
            <el-button plain @click="handleClose">关闭</el-button>
          </div>
        </div>
        <div style="flex: 1">
          <el-tabs type="card" style="height: 100%">
            <el-tab-pane label="站点信息" style="height: 100%">
              <el-form
                :model="formData"
                size="small"
                inline
                :disabled="pageType == 'view'"
              >
                <div class="station-info">
                  <!-- 第一段 -->
                  <div class="title">基础信息</div>
                  <div class="panel">
                    <div class="" style="width: 45%">
                      <!-- 图片 -->
                      <div
                        class="carousel-box"
                        :class="{
                          hasUpdate: changedFields.includes('photos'),
                        }"
                      >
                        <el-upload
                          v-model:file-list="formData.photos"
                          class="avatar-uploader"
                          :action="`${baseUrl}/upload/index`"
                          :show-file-list="false"
                          multiple
                          :limit="10"
                          :on-success="handleAvatarSuccess"
                        >
                          <img
                            class="img"
                            src="@/assets/images/icon/upload.png"
                            alt=""
                          />
                        </el-upload>
                        <!-- 删除 -->
                        <el-carousel :interval="5000" arrow="always">
                          <el-carousel-item
                            height="200px"
                            v-for="item in formData.photos"
                            :key="item.uid"
                          >
                            <img style="width: 100%" :src="item.url" alt="" />
                            <el-button
                              class="delete-btn"
                              type="danger"
                              icon="Delete"
                              circle
                              @click="handleDeletePhoto(item)"
                            />
                          </el-carousel-item>
                        </el-carousel>
                      </div>
                    </div>
                    <div style="margin-left: 12px; width: 27%">
                      <el-form-item label="站点属性">
                        <el-select
                          v-model="formData.attribute"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('attribute'),
                          }"
                        >
                          <el-option
                            v-for="item in attributeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="所属街道">
                        <el-select
                          v-model="formData.street_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('street_id'),
                          }"
                          @change="handleStreetChange"
                        >
                          <el-option
                            v-for="item in streetOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="居委区域编号">
                        <el-select
                          v-model="formData.committee_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('committee_id'),
                          }"
                        >
                          <el-option
                            v-for="item in committeeOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="名称">
                        <el-input
                          v-model="formData.name"
                          placeholder="请输入"
                          :class="{
                            hasUpdate: changedFields.includes('name'),
                          }"
                        ></el-input>
                      </el-form-item>

                      <el-form-item label="地址">
                        <el-input
                          v-model="formData.address"
                          :class="{
                            hasUpdate: changedFields.includes('address'),
                          }"
                        >
                          <template #suffix>
                            <img
                              @click.stop="handleFindAddress"
                              style="width: 16px; cursor: pointer"
                              src="@/assets/images/icon/dingwei_icon.png"
                              alt=""
                            />
                          </template>
                        </el-input>
                      </el-form-item>
                      <el-form-item label="所有权归属">
                        <el-select
                          v-model="formData.ownership"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('ownership'),
                          }"
                        >
                          <el-option
                            v-for="item in ownershipOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="类型">
                        <el-select
                          v-model="formData.type"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('type'),
                          }"
                        >
                          <el-option
                            v-for="item in typeOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="启用日期">
                        <el-select
                          v-model="formData.implement_date"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('implement_date'),
                          }"
                        >
                          <el-option
                            v-for="item in yearOptions"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value"
                          />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="使用单位">
                        <el-input
                          v-model="formData.used_by"
                          placeholder="请输入"
                          :class="{
                            hasUpdate: changedFields.includes('used_by'),
                          }"
                        ></el-input>
                      </el-form-item>
                    </div>
                    <div style="margin-left: 12px; width: 27%">
                      <el-form-item label="作息场所造价">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.room_cost"
                          :class="{
                            hasUpdate: changedFields.includes('room_cost'),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="占地面积">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.land_area"
                          :class="{
                            hasUpdate: changedFields.includes('land_area'),
                          }"
                        />
                      </el-form-item>
                      <el-form-item label="作息场所建筑面积">
                        <el-input-number
                          :min="null"
                          :step="0.01"
                          :precision="2"
                          :controls="false"
                          v-model="formData.building_area"
                          :class="{
                            hasUpdate: changedFields.includes('building_area'),
                          }"
                        />
                      </el-form-item>

                      <el-form-item label="所在位置">
                        <el-select
                          v-model="formData.location_type"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('location_type'),
                          }"
                        >
                          <el-option label="临街" value="临街" />
                          <el-option label="居住区内" value="居住区内" />
                          <el-option
                            label="商场（临街）"
                            value="商场（临街）"
                          />
                          <el-option
                            label="绿地（临街）"
                            value="绿地（临街）"
                          />
                          <el-option label="绿地公园内" value="绿地公园内" />
                          <el-option label="其他" value="其他" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="使用情况">
                        <el-select
                          v-model="formData.usage_status"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('usage_status'),
                          }"
                        >
                          <el-option label="在用" value="在用" />
                          <el-option label="闲置" value="闲置" />
                        </el-select>
                      </el-form-item>
                      <el-form-item label="所属班组">
                        <el-input
                          v-model="formData.team"
                          :class="{
                            hasUpdate: changedFields.includes('team'),
                          }"
                        ></el-input>
                      </el-form-item>
                      <el-form-item label="运营单位">
                        <el-select
                          v-model="formData.operator_id"
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('operator_id'),
                          }"
                        >
                          <el-option
                            v-for="item in operatorOptions"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id"
                          />
                        </el-select>
                        <!-- <el-input
                          v-model="formData.operator_company"
                          placeholder="请输入"
                        /> -->
                      </el-form-item>
                    </div>
                  </div>

                  <!-- 第二段 -->
                  <div class="title">设施及使用信息</div>
                  <div class="panel" style="flex-direction: column">
                    <template v-if="pageType == 'view'">
                      <div class="flex">
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate:
                              changedFields.includes('compressor_type'),
                          }"
                        >
                          <span class="title">作业机具停放面积</span>
                          <img
                            src="@/assets/images/huanweidaoban/zuoyejijutingfangmianji.png"
                            alt=""
                          />
                          <span class="num" style="top: 40px">{{
                            formData.equipment_parking_area
                          }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('total_staff'),
                          }"
                        >
                          <span class="title">使用总人数</span>
                          <img
                            src="@/assets/images/huanweidaoban/shiyongzongrenshu.png"
                            alt=""
                          />
                          <span class="num" style="left: 55px; top: 40px">{{
                            formData.total_staff
                          }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('female_staff'),
                          }"
                        >
                          <span class="title">女职工数</span>
                          <img
                            src="@/assets/images/huanweidaoban/nv_zhi_gong_shu.png"
                            alt=""
                          />
                          <span class="num" style="top: 40px">{{
                            formData.female_staff
                          }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate:
                              changedFields.includes('life_facility_type'),
                          }"
                        >
                          <span class="title">生活设备类型</span>
                          <img
                            src="@/assets/images/huanweidaoban/sheng_huo_she_bei_lei_xing.png"
                            alt=""
                          />
                          <span class="num">{{
                            formData.life_facility_type
                          }}</span>
                        </div>
                      </div>
                      <div class="flex">
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes(
                              'separate_changing_room'
                            ),
                          }"
                        >
                          <span class="title">分室更衣</span>
                          <img
                            src="@/assets/images/huanweidaoban/fen_shi_geng_yi.png"
                            alt=""
                          />
                          <span class="num">{{
                            formData.separate_changing_room
                          }}</span>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('purposes'),
                          }"
                        >
                          <span class="title">用途</span>
                          <img
                            src="@/assets/images/huanweidaoban/yongtu-bg.png"
                            alt=""
                          />
                          <div
                            class="num"
                            style="
                              color: #fff;
                              width: 100%;
                              font-size: 18px;
                              line-height: 30px;
                              text-align: left;
                            "
                          >
                            <div
                              class="flex"
                              v-for="item in formData.purposes"
                              :key="item"
                            >
                              <img
                                src="@/assets/images/huanweidaoban/yongtu-gou.png"
                                alt=""
                                style="
                                  width: 20px;
                                  height: 20px;
                                  margin-right: 4px;
                                "
                              />
                              {{ item }}
                            </div>
                          </div>
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('repair_years'),
                          }"
                        >
                          <span class="title">维修年份</span>
                          <img
                            src="@/assets/images/huanweidaoban/wei_xiu_nian_fen.png"
                            alt=""
                          />
                          <span
                            class="num"
                            style="top: 30px; color: #fff; width: 145px"
                            >{{ formData.repair_years }}</span
                          >
                        </div>
                        <div
                          class="img-box"
                          :class="{
                            hasUpdate: changedFields.includes('room_category'),
                          }"
                        >
                          <span class="title">道班房类型</span>
                          <img
                            src="@/assets/images/huanweidaoban/dao_ban_fang_lei_xing.png"
                            alt=""
                          />
                          <span class="num" style="font-size: 18px">{{
                            formData.room_category
                          }}</span>
                        </div>
                      </div>
                    </template>
                    <template v-else>
                      <div class="flex">
                        <el-form-item label="作业机具停放面积">
                          <el-input-number
                            :min="null"
                            :step="0.01"
                            :precision="2"
                            :controls="false"
                            v-model="formData.equipment_parking_area"
                            :class="{
                              hasUpdate: changedFields.includes(
                                'equipment_parking_area'
                              ),
                            }"
                          ></el-input-number>
                        </el-form-item>
                        <el-form-item label="使用总人数">
                          <el-input
                            v-model="formData.total_staff"
                            :class="{
                              hasUpdate: changedFields.includes('total_staff'),
                            }"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="女职工数">
                          <el-input
                            v-model="formData.female_staff"
                            :class="{
                              hasUpdate: changedFields.includes('female_staff'),
                            }"
                          ></el-input>
                        </el-form-item>
                      </div>
                      <div class="flex">
                        <el-form-item label="生活设备类型">
                          <el-select
                            v-model="formData.life_facility_type"
                            placeholder="请选择"
                            :class="{
                              hasUpdate:
                                changedFields.includes('life_facility_type'),
                            }"
                          >
                            <el-option label="是" value="是" />
                            <el-option label="否" value="否" />
                            <el-option label="有浴室" value="有浴室" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="分室更衣">
                          <el-select
                            v-model="formData.separate_changing_room"
                            placeholder="请选择"
                            :class="{
                              hasUpdate: changedFields.includes(
                                'separate_changing_room'
                              ),
                            }"
                          >
                            <el-option label="分" value="分" />
                            <el-option label="否" value="否" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="用途">
                          <el-select
                            v-model="formData.purposes"
                            multiple
                            collapse-tags
                            collapse-tags-tooltip
                            placeholder="请选择"
                            :class="{
                              hasUpdate: changedFields.includes('purposes'),
                            }"
                          >
                            <el-option label="整建制班组" value="整建制班组" />
                            <el-option label="工人休息点" value="工人休息点" />
                            <el-option
                              label="应急物资仓库"
                              value="应急物资仓库"
                            />
                            <el-option label="仓库" value="仓库" />
                            <el-option label="两网融合点" value="两网融合点" />
                            <el-option label="蓝鲸" value="蓝鲸" />
                            <el-option label="暂时停用" value="暂时停用" />
                            <el-option label="其他" value="其他" />
                          </el-select>
                        </el-form-item>
                      </div>
                      <div class="flex">
                        <el-form-item label="维修年份">
                          <!-- <el-select
                          v-model="formData.repair_years"
                          multiple
                          collapse-tags
                          collapse-tags-tooltip
                          placeholder="请选择"
                          :class="{
                            hasUpdate: changedFields.includes('repair_years'),
                          }"
                        >
                          <el-option label="2020" value="2020" />
                          <el-option label="2021" value="2021" />
                          <el-option label="2022" value="2022" />
                          <el-option label="2023" value="2023" />
                          <el-option label="2024" value="2025" />
                          <el-option label="2025" value="2025" />
                        </el-select> -->
                          <el-input
                            v-model="formData.repair_years"
                            placeholder="请输入"
                            :class="{
                              hasUpdate: changedFields.includes('repair_years'),
                            }"
                          ></el-input>
                        </el-form-item>
                        <el-form-item label="道班房类型">
                          <el-select
                            v-model="formData.room_category"
                            placeholder="请选择"
                            :class="{
                              hasUpdate:
                                changedFields.includes('room_category'),
                            }"
                          >
                            <el-option label="独立式" value="独立式" />
                            <el-option label="附属式" value="附属式" />
                          </el-select>
                        </el-form-item>
                        <el-form-item label="是否为自己装修">
                          <el-select
                            v-model="formData.self_renovated"
                            placeholder="请选择"
                            :class="{
                              hasUpdate:
                                changedFields.includes('self_renovated'),
                            }"
                          >
                            <el-option label="是" value="是" />
                            <el-option label="否" value="否" />
                          </el-select>
                        </el-form-item>
                      </div>
                    </template>
                    <div class="box2">
                      <div class="title">备注</div>
                      <el-input
                        v-model="formData.remark"
                        type="textarea"
                        :rows="3"
                        class="input5"
                        placeholder="请输入备注"
                        :class="{
                          hasUpdate: changedFields.includes('remark'),
                        }"
                      />
                    </div>
                  </div>
                </div>
              </el-form>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
    <CustomDialog ref="customDialogRef" @confirm="handleDeleteConfirm" />
  </el-drawer>
</template>

<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import StationMap from "./stationMap.vue";
import CustomDialog from "@/components/customDialog.vue";
import {
  sanitationRoomsAdd,
  sanitationRoomsUpdate,
  sanitationRoomsDelete,
} from "@/api/sanitation_rooms";
import { streetsList, operatorsList, getCommittees } from "@/api/index";
import { ownershipOptions, attributeOptions, typeOptions } from "../../options";
defineOptions({
  name: "StationDrawer",
});
const baseUrl = ref(import.meta.env.VITE_BASE_URL);
const visible = ref(false); // 是否显示
const pageType = ref("view"); // 是否编辑 add edit view
const stationMapRef = ref(null); // 地图组件引用
const currentRow = ref(null); // 当前行
const customDialogRef = ref(null); // 自定义弹框引用
const streetOptions = ref([]); // 街道选项
const committeeOptions = ref([]); // 居委区域选项
const operatorOptions = ref([]); // 运营单位选项
const changedFields = ref([]); // 修改的字段
const openType = ref(null); // 打开弹框时的类型
const auditType = ref(0); // 是否审核 1 未审核 2 已审核 0其他
const emit = defineEmits(["refresh"]);
const yearOptions = computed(() => {
  let years = [];
  // 从 1990 年到当前年份
  let currentYear = new Date().getFullYear();
  for (let year = 1990; year <= currentYear; year++) {
    years.push({ label: year.toString(), value: year });
  }
  return years.concat({ label: "未知", value: "未知" });
});
onMounted(() => {
  streetsList({}).then((res) => {
    if (res.code == 0) {
      streetOptions.value = res.data || [];
    }
  });
  operatorsList({ project_id: 2 }).then((res) => {
    if (res.code == 0) {
      operatorOptions.value = res.data || [];
    }
  });
});
const formData = ref({
  id: null, // 主键ID
  street_id: null, // 所属街镇
  category: null, // 分类
  name: null, // 名称
  address: null, // 地址
  longitude: null, // 经度
  latitude: null, // 纬度
  status: null, // 状态
  photos: [], // 照片 ['1','2']
  type: null, // 类型
  ownership: null, // 所有权归属
  implement_date: null, // 启用日期
  used_by: null, // 使用单位
  room_cost: null, // 作息场所造价
  land_area: null, // 占地面积
  building_area: null, // 作息场所建筑面积
  location_type: null, // 所在位置
  usage_status: null, // 使用情况
  team: null, // 所属班组
  equipment_parking_area: null, // 作业机具停放面积
  total_staff: null, // 使用总人数
  famale_staff: null, // 女职工数
  life_facility_type: null, // 生活设备类型
  separate_changing_room: null, // 分室更衣
  purposes: [], // 用途 ['1','2']
  repair_years: null, // 维修年份 ['1','2']
  room_category: null, // 道班房类型
  committee_id: null, // 居委区域编号
  operator_id: null, // 运营单位ID
  remark: null, //备注
  attribute: null,
});

const openDrawer = (row, type = "view", audit = 0) => {
  auditType.value = audit;
  pageType.value = type;
  openType.value = type;
  currentRow.value = row;
  if (row) {
    // 如果formData.street_id，则获取居委区域
    if (row.street_id) {
      handleStreetChange(row.street_id);
    }
    formData.value = { ...row };
    if (typeof row.changed_fields === "object" && audit == 1) {
      changedFields.value = Object.keys(row.changed_fields);
    } else {
      changedFields.value = [];
    }
  } else {
    formData.value = {
      id: null, // 主键ID
      street_id: null, // 所属街镇
      category: null, // 分类
      name: null, // 名称
      address: null, // 地址
      longitude: null, // 经度
      latitude: null, // 纬度
      status: null, // 状态
      photos: [], // 照片 ['1','2']
      type: null, // 类型
      ownership: null, // 所有权归属
      implement_date: null, // 启用日期
      used_by: null, // 使用单位
      room_cost: null, // 作息场所造价
      land_area: null, // 占地面积
      building_area: null, // 作息场所建筑面积
      location_type: null, // 所在位置
      usage_status: null, // 使用情况
      team: null, // 所属班组
      equipment_parking_area: null, // 作业机具停放面积
      total_staff: null, // 使用总人数
      famale_staff: null, // 女职工数
      life_facility_type: null, // 生活设备类型
      separate_changing_room: null, // 分室更衣
      purposes: [], // 用途 ['1','2']
      repair_years: null, // 维修年份 ['1','2']
      room_category: null, // 道班房类型
      committee_id: null, // 居委区域编号
      operator_id: null, // 运营单位ID
      remark: null, //备注
      attribute: null,
    };
  }
  visible.value = true;
};
const onSubmit = () => {
  let o = {
    ...formData.value,
  };
  let api = sanitationRoomsAdd;
  if (currentRow.value?.id) {
    api = sanitationRoomsUpdate;
    o.id = currentRow.value?.id;
  }
  api(o)
    .then((res) => {
      if (res.code == 0) {
        ElMessage.success("操作成功");
        handleClose();
        // 刷新列表
        emit("refresh");
      }
    })
    .catch(() => {
      ElMessage.error("操作失败");
    });
};
const handleClose = () => {
  visible.value = false;
};
// 编辑
const handleEdit = (type) => {
  console.log(type, "type");
  if (type) {
    pageType.value = type;
    return;
  }
  console.log(pageType.value, "type");
  if (pageType.value == "add") {
    handleClose();
    return;
  } else if (pageType.value == "edit") {
    if (openType.value == "edit") {
      handleClose();
      return;
    }
    pageType.value = "view";
  } else if (pageType.value == "view") {
    handleClose();
  }
};

// 上传图片
const handleAvatarSuccess = (res, file) => {
  console.log(res, file);
  file.url = res.data.url;
  if (res.code == 0) {
    // formData.value.photos.push(res.data.url);
  }
};

// 删除图片
const handleDeletePhoto = (item) => {
  formData.value.photos = formData.value.photos.filter((i) => i !== item);
};

// 删除
const handleDelete = () => {
  customDialogRef.value.openDialog("del");
  // ElMessageBox.confirm("确定删除吗？", "提示", {
  //   confirmButtonText: "确定",
  //   cancelButtonText: "取消",
  //   type: "warning",
  // }).then(() => {
  //   console.log("删除");
  // });
};

// 执行删除逻辑
const handleDeleteConfirm = () => {
  console.log("执行删除逻辑");
  sanitationRoomsDelete({ id: currentRow.value.id }).then((res) => {
    if (res.code == 0) {
      ElMessage.success("删除成功");
      handleClose();
      // 刷新列表
      emit("refresh");
    }
  });
};

// 查找地址
const handleFindAddress = () => {
  let address = formData.value.address;
  if (!address) {
    ElMessage.error("请输入地址");
    return;
  }
  stationMapRef.value.setAddress(address);
};

// 处理位置
const handleLocation = (location) => {
  console.log(location, "location 厕所 子组件传过来的经纬度");
  formData.value.longitude = location.lng;
  formData.value.latitude = location.lat;
};

// 街道选择改变
const handleStreetChange = (value) => {
  console.log(value, "value");
  formData.value.committee_id = null;
  if (value) {
    committeeOptions.value = [];
    getCommittees({ street_id: value }).then((res) => {
      if (res.code == 0) {
        committeeOptions.value = res.data || [];
      }
    });
  }
};

defineExpose({
  openDrawer,
});
</script>

<style scoped lang="scss">
@use "./station.scss" as *;
@use "../../index.scss" as *;
</style>
